<template>
	<view class="layout" v-if="value" @click.stop="maskClosePopup" @touchmove.stop.prevent="stopScrolling">
		<view class="layout-main" @click.prevent.stop>
			<view class="layout-main-close">
				<image :src="clearIcon" @click.stop="maskClosePopup" />
			</view>

			<view class="layout-main-title">
				<image :src="titleIcon" />
				<text>认证提示</text>
			</view>

			<view class="layout-main-hint">
				<text>为了您的账号安全，请验证实名信息！</text>
			</view>

			<view class="layout-main-content">
				<view class="layout-main-content-item" :key="index" v-for="(item, index) in verifedTypeList">
					<view class="layout-main-content-item-left">{{ item.label }}</view>

					<view class="layout-main-content-item-right">
						<input
							:type="item.inputType || 'text'"
							:placeholder="item.placeholder"
							placeholder-class="placeholder"
							v-model="submitParams[item.type]"
						/>
					</view>
				</view>
			</view>

			<view class="layout-main-footer">
				<button hover-class="none" @click.prevent.stop="submit">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
import { setUserVerified } from '@/api/other';
import { mapGetters, mapMutations } from 'vuex';
import { checkName, identityIDCard, defaultImageUrl } from '@/utils/common';

const titleIcon = Object.freeze(`${defaultImageUrl}icon/icon_money_ts.png`);
const clearIcon = Object.freeze(`${defaultImageUrl}icon/icon_sqtx_close.png`);

const verifedTypeList = [
	{
		label: '姓名',
		type: 'realName',
		checkCallback: checkName,
		placeholder: '请输入身份证上姓名'
	},
	{
		label: '身份证',
		type: 'idCard',
		inputType: 'idcard',
		placeholder: '请输入正确的身份证号',
		checkCallback: identityIDCard
	}
];

export default {
	props: {
		value: {
			type: Boolean,
			default: false
		}
	},

	data() {
		return {
			clearIcon,
			titleIcon,

			isLoading: false,
			verifedTypeList,

			submitParams: {
				idCard: '',
				realName: ''
			}
		};
	},

	computed: {
		...mapGetters(['userInfo'])
	},

	methods: {
		...mapMutations(['changeUserInfo']),

		stopScrolling() {
			return;
		},

		maskClosePopup() {
			const { isLoading } = this;

			!isLoading && this.$emit('input', false);
		},

		submit() {
			const { userInfo, submitParams, verifedTypeList } = this;

			const status = verifedTypeList.every((item) => {
				const { type, checkCallback } = item;

				if (!checkCallback) {
					return !!submitParams[type];
				}

				const { isPass, errorMessage } = checkCallback?.(submitParams[type]) || {};

				if (!isPass) {
					uni.showToast({
						mask: true,
						icon: 'none',
						title: errorMessage
					});
				}

				return isPass;
			});

			if (!status) {
				return;
			}

			this.isLoading = true;

			setUserVerified(submitParams).then((res) => {
				const { code, data, message } = res;

				this.isLoading = false;

				if (code !== 200) {
					return;
				}

				uni.showToast({
					mask: true,
					icon: 'none',
					title: data ? '实名认证成功' : '姓名与身份证不匹配'
				});

				if (!data) {
					return;
				}

				this.$emit('input', false);

				this.changeUserInfo({
					...userInfo,
					...submitParams,
					verifiedStatus: 1
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.layout {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 99999;
	background: rgba(51, 51, 51, 0.3);

	&-main {
		position: absolute;
		top: 5%;
		left: 50%;
		height: 770rpx;
		overflow: hidden;
		border-radius: 24rpx;
		width: calc(100vw - 58rpx);
		transform: translate(-50%, 0);
		background: linear-gradient(180deg, #e3edff 0%, #fff 100%);

		color: #333;
		font-size: 28rpx;

		&-footer {
			margin-top: 100rpx;
			padding: 0 40rpx;

			button {
				@include Db_commonButton(88rpx, 12rpx);
				background: #07c160;

				&.active,
				&:active {
					background: rgba(7, 193, 96, 0.7);
				}
			}
		}

		&-content {
			padding: 0 28rpx;
			margin-top: 72rpx;

			&-item {
				height: 100rpx;
				background: #fff;
				border-radius: 24rpx;

				display: flex;
				align-items: center;

				margin-top: 40rpx;

				&-left {
					width: 114rpx;
					padding-left: 30rpx;
				}

				&-right {
					flex: 1;

					input {
						color: #333;
						font-size: 28rpx;
						font-weight: 500;

						height: 100rpx;
						padding-left: 26rpx;
					}

					/deep/ .placeholder {
						color: #999;
						font-size: 28rpx;
					}
				}

				&:first-child {
					margin-top: 0;
				}
			}
		}

		&-close {
			margin-top: 8rpx;
			text-align: right;

			image {
				width: 56rpx;
				height: 56rpx;
				margin-right: 8rpx;
			}
		}

		&-title {
			margin-top: 4rpx;

			display: flex;
			align-items: center;
			justify-content: center;

			font-size: 36rpx;
			font-weight: bold;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}

		&-hint {
			margin-top: 62rpx;
			text-align: center;
		}
	}
}
</style>
